<template>
	<view class="list-box" :class="{'list-h':type == 2}">
		<view class="img-box">
			<image class="img" src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3266446909,2509401678&fm=26&gp=0.jpg"></image>
		</view>
		<view class="con-box">
			<view class="title">
				<text class="title-label">火锅节</text>
				更凭歌舞为媒。算合作人间鸩毒猜。况怨无小大，生于所爱；物无美恶，过则为灾。与汝成言，勿留亟退，吾力犹能肆汝杯。杯再拜，道麾之即去，招则须来
			</view>
			<view class="discount">
				<text class="discount-item">满60减40</text>
			</view>
			<view class="price-box">
				<view>
					<text class="price">￥99</text>
					<text class="del-price">￥145</text>
				</view>
				<view  class="price-right"  v-if="type == 1">
					4000人付款
				</view>
			</view>
			<view class="shop">
				<view class="shop-name u-line-1" @tap="navShop">
					魅族旗舰店
					<text class="iconfont iconxiangyou1"></text>
				</view>
				<view class="shop-right" v-if="type == 2">
					4000人付款
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		props:{
			/* 1 是竖屏 2 是横屏  */
			type:{
				default:1,
				type:Number
			}
		},
		methods:{
			navShop(){
				uni.navigateTo({
					url:"/pages/shop/index"
				})
			}
		}
	}
</script>

<style lang="scss"scoped>
	.list-box{
		width: 100%;
		background: #FFFFFF;
		padding: 10rpx 10rpx 10rpx 10rpx;
		border-radius: 16rpx 16rpx;
		.img-box{
			text-align: center;
			padding-bottom: 30rpx;
			.img{
				width: 206rpx;
				height: 206rpx;
			}
		}
		.con-box{
			.title{
				line-height: 1.3;
				font-size: 24rpx;
				color: #414141;
				font-weight: 400;
				display:-webkit-box;
				-webkit-line-clamp:3;
				-webkit-box-orient:vertical;
				overflow:hidden;
				height: 88rpx;
				.title-label{
					font-size: 20rpx;
					color: #FFFFFF;
					padding: 0 12rpx;
					background: #FC1546;
					margin-right: 8rpx;
					line-height: 20rpx;
					border-radius: 8rpx 8rpx;
					height: 30rpx;
					line-height: 30rpx;
					display: inline-block;
					vertical-align: middle;
				}
			}
			.discount{
				height: 50rpx;
				padding-top: 10rpx;
				.discount-item{
					font-size: 20rpx;
					color: #FA436A;
					border: 2rpx solid #FA436A;
					padding: 0 12rpx;
					border-radius: 8rpx 8rpx;
					height: 36rpx;
					line-height: 36rpx;
					display: inline-block;
					margin-right: 10rpx;
				}
			}
			.price-box{
				padding-top: 8rpx;
				display: flex;
				justify-content: space-between;
				align-items: flex-end;
				line-height: 1;
				.price{
					color: #FA436A;
					font-size: 32rpx;
					font-weight: 400;
				}
				.del-price{
					color: #c1c1c1;
					font-size: 24rpx;
					padding-left: 12rpx;
					text-decoration:line-through;
				}
				.price-right{
					color: #c1c1c1;
					font-size: 20rpx;
				}
				
			}
			.shop{
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: flex-end;
				color: #c1c1c1;
				font-size: 24rpx;
				padding-top: 10rpx;
				.shop-name{
					.iconfont{
						font-size: 24rpx;
					}
				}
			}
		}
		&.list-h{
			display: flex;
			justify-content: flex-start;
			align-items: flex-start;
			.img-box{
				min-width: 184rpx;
				max-width: 184rpx;
				height: 184rpx;
				.img{
					width: 184rpx;
					height: 184rpx;
				}
			}
			.discount{
				height: 50rpx;
				padding-top: 12rpx;
				
			}
			.con-box{
				width: calc(100% - 184rpx);
				padding-left: 20rpx;
				.title{
					display:-webkit-box;
					-webkit-line-clamp:2;
					-webkit-box-orient:vertical;
					overflow:hidden;
					height: 60rpx;
				}
			}
			.price-box{
				padding-top: 0;
			}
		}
	}
	
</style>
